<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - Async</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.ztree.all.min.js"></script>
    <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
</HEAD>
<SCRIPT type="text/javascript">
    var removeName = ["标准化规范化试点专题", "工作动态", "政务公开事项目录", "政务公开事项流程图", "政务公开事项标准", "公开指南", "公众参与", "荣誉资讯",
		"扶贫资讯", "活动资讯","工作资讯","执行公开","服务公开","结果公开","管理公开","决策公开"]
    var keepNames = ["扶贫救灾", "公共资源交易", "公共文化服务"]

    var setting = {
        async: {
            enable: true,
            url: "/area",
            type: "post",
            autoParam: ["PARENT_ID", "name=n", "level=lv"],
            otherParam: {"otherParam": "zTreeAsyncTest", "id": 'fa744f49edec4671b3f82986dae033c8'},
            dataFilter: filter
        },
        data: {
            key: {
                name: "CHANNEL_NAME",
                isParent: "parent"
                //name: "PARENT_ID"
            },
            simpleData: {
                enable: true,
                idKey: "CHANNEL_ID",
                pIdKey: "PARENT_ID",
            },
            render: function (name, treeNode) {
                return name + treeNode.name
            }

        },
        callback: {
            onClick: clickDom,
            beforeCheck: beforeCheck,
            onCheck: onCheck,
            onAsyncSuccess: zTreeOnAsyncSuccess,
            beforeExpand: zTreeBeforeExpand
        },
    };
    function zTreeBeforeExpand(treeId, treeNode) {
        return true;
    };

    function clickDom(e, treeId, treeNode) {
        console.log(treeId + "" + treeNode);
    }

    //触发点击事件
    function onCheck(e, treeId, treeNode) {
        $('#id').val(treeNode.id);
    }

    //禁止点击
    function beforeCheck(treeId, treeNode) {
        console.log(treeId + "" + treeNode);
        //可以进行部分逻辑判断
        return true;
    }

    function filter(treeId, parentNode, childNodes) {
        childNodes = childNodes.data.page.list;
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            for (var j = 0, k = removeName.length; j < k; j++) {
				var childNode = childNodes[i];
				if(childNode == undefined){
					console.log("continue");
					continue;
				}
                childNode.isParent=true;
                if ((childNode.PARENT_ID == null || childNode.PARENT_ID == "fa744f49edec4671b3f82986dae033c8")&& childNode.CHANNEL_NAME == removeName[j]) {
					childNodes.splice(i, 1);
					l = childNodes.length;
					console.log(i + "  j=" + j + "  k=" + k);
                }
				/*var node = childNodes[i];
				if(node == undefined){
					console.log("continue");
					continue;
				}
				console.log(node);
				if ((node.PARENT_ID == null || node.PARENT_ID == 'fa744f49edec4671b3f82986dae033c8') && node.CHANNEL_NAME != keepNames[j]) {
					childNodes.splice(i, 1);
					l = childNodes.length;
					console.log("l= "+l+" i="+i + "  j=" + j + "  k=" + k);
				}*/
            }
            //childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }
    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
        alert(msg);
    };
    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting);
    });
    //-->
</SCRIPT>

<BODY>
<h1>异步加载节点数据的树</h1>
<h6>[ 文件路径: core/async.html ]</h6>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="right">
        <ul class="info">
            <li class="title"><h2>1、setting 配置信息说明</h2>
                <ul class="list">
                    <li class="highlight_red">使用异步加载，必须设置 setting.async 中的各个属性，详细请参见 API 文档中的相关内容</li>
                </ul>
            </li>
            <li class="title"><h2>2、treeNode 节点数据说明</h2>
                <ul class="list">
                    <li>异步加载功能对于 treeNode 节点数据没有特别要求，如果采用简单 JSON 数据，请设置 setting.data.simple 中的属性</li>
                    <li>如果异步加载每次都只返回单层的节点数据，那么可以不设置简单 JSON 数据模式</li>
                </ul>
            </li>
            <li class="title"><h2>3、其他说明</h2>
                <ul class="list">
                    <li class="highlight_red">观察 autoParam 和 otherParam 请使用 firebug 或 浏览器的开发人员工具</li>
                    <li class="highlight_red">此 Demo 只能加载到第 4 级节点（level=3）</li>
                    <li class="highlight_red">此 Demo 利用 dataFilter 对节点的 name 进行了修改</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</BODY>
</HTML>
